<template>
  <div class="card-layout">
    <span class="text" v-if="!childCards.length">从左侧拖拽来字段</span>
    <draggable
      v-model="childCards"
      item-key="cardCode"
      :group="{
        name: 'preview',
        put: childCards.length >= layoutTypeLimit[layout] ? false : true,
      }"
      animation="200"
      :disabled="mode !== 'design'"
      class="card-draggable"
      :class="percent"
      @add="onAddCard"
    >
      <template #item="{ element }">
        <CardContainer
          v-if="mode === 'design'"
          :mode="mode"
          :curCardCode="curCardCode"
          :card="element"
          :formCards="formCards"
          @click="(ev) => onCardClick(ev, element)"
        />
        <CardWrapper
          v-else
          :mode="mode"
          :card="element"
          :formCards="formCards"
          :curBizObject="curBizObject"
        />
      </template>
    </draggable>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { useStore } from 'vuex';
import { message } from 'ant-design-vue';
import draggable from 'vuedraggable';
import cloneDeep from 'lodash/cloneDeep';
import { FormCard } from '@/model/types/formCard';
import { LayoutTypeLimit } from '@/model/objectMap/controlMap';
import CardContainer from '@/engine/components/CardContainer.vue';

export default defineComponent({
  name: 'CardLayout',
  components: {
    draggable,
    CardContainer,
  },
  props: {
    mode: {
      type: String,
      default: '',
    },
    card: {
      type: Object as any,
      default: () => ({}),
    },
    curBizObject: {
      type: Object as any,
      default: () => ({}),
    },
    curCardCode: {
      type: String,
      default: '',
    },
    formCards: {
      type: Array as any,
      default: () => [],
    },
  },
  setup(props, context) {
    const store = useStore();
    const layoutType = computed(() => props.card.controls.layoutType);
    const layoutPercent = computed(() => props.card.controls.layoutPercent);
    const layout: any = computed(() => layoutType.value.defaultValue);
    const percent = computed(() => layoutPercent.value.defaultValue);
    const childCards = computed({
      get: () => props.card.columns,
      set: (val) => {
        context.emit('onUpdateChildCards', val, props.card.cardCode);
      },
    });
    const layoutTypeLimit: any = LayoutTypeLimit;
    const onAddCard = (data: any) => {
      const card: FormCard = data.item.__draggable_context.element;
      // 系统卡片不允许重复
      if (card.cardCode.indexOf('_copy') > -1) {
        const filterList = props.formCards.map((it: any) => {
          if (it.columns) {
            const card: FormCard = data.item.__draggable_context.element;
            it.columns = it.columns.filter(
              (el: FormCard) => el.cardCode !== card.cardCode,
            );
          }
          return it;
        });
        store.commit('formDesign/SetFormCards', cloneDeep(filterList));
        message.warning('系统卡片不允许重复');
      } else {
        // 防止formCards和拖拽来的对象存在引用关系
        store.commit('formDesign/SetCurCardCode', card.cardCode);
        store.commit('formDesign/SetFormCards', cloneDeep(props.formCards));
      }
    };
    const onCardClick = (ev: Event, card: any) => {
      store.commit('formDesign/SetCurCardCode', card.cardCode);
      ev.stopPropagation();
    };

    return {
      childCards,
      layout,
      percent,
      layoutTypeLimit,
      onAddCard,
      onCardClick,
    };
  },
});
</script>

<style lang="less" scoped>
.card-layout {
  width: 100%;
  position: relative;
  .text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    line-height: 22px;
    color: @rb-label-color;
  }
  .card-draggable {
    display: flex;
    min-height: 78px;
    .card-container {
      border-bottom: none;
      &:hover {
        background-color: @rb-border-color-base;
      }
    }
    &.twoCols1 {
      .card-container,
      .card-wrapper {
        &:nth-child(1),
        &:nth-child(2) {
          flex: 0 0 50%;
          max-width: 50%;
        }
      }
    }
    &.twoCols2 {
      .card-container,
      .card-wrapper {
        &:nth-child(1) {
          flex: 0 0 33.33%;
          max-width: 33.33%;
        }
        &:nth-child(2) {
          flex: 0 0 66.66%;
          max-width: 66.66%;
        }
      }
    }
    &.twoCols3 {
      .card-container,
      .card-wrapper {
        &:nth-child(1) {
          flex: 0 0 66.66%;
          max-width: 66.66%;
        }
        &:nth-child(2) {
          flex: 0 0 33.33%;
          max-width: 33.33%;
        }
      }
    }
    &.twoCols4 {
      .card-container,
      .card-wrapper {
        &:nth-child(1) {
          flex: 0 0 25%;
          max-width: 25%;
        }
        &:nth-child(2) {
          flex: 0 0 75%;
          max-width: 75%;
        }
      }
    }
    &.twoCols5 {
      .card-container,
      .card-wrapper {
        &:nth-child(1) {
          flex: 0 0 75%;
          max-width: 75%;
        }
        &:nth-child(2) {
          flex: 0 0 25%;
          max-width: 25%;
        }
      }
    }
    &.threeCols1 {
      .card-container,
      .card-wrapper {
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          flex: 0 0 33.33%;
          max-width: 33.33%;
        }
      }
    }
    &.threeCols2 {
      .card-container,
      .card-wrapper {
        &:nth-child(1),
        &:nth-child(2) {
          flex: 0 0 25%;
          max-width: 25%;
        }
        &:nth-child(3) {
          flex: 0 0 50%;
          max-width: 50%;
        }
      }
    }
    &.threeCols3 {
      .card-container,
      .card-wrapper {
        &:nth-child(1) {
          flex: 0 0 50%;
          max-width: 50%;
        }
        &:nth-child(2),
        &:nth-child(3) {
          flex: 0 0 25%;
          max-width: 25%;
        }
      }
    }
    &.threeCols4 {
      .card-container,
      .card-wrapper {
        &:nth-child(2) {
          flex: 0 0 50%;
          max-width: 50%;
        }
        &:nth-child(1),
        &:nth-child(3) {
          flex: 0 0 25%;
          max-width: 25%;
        }
      }
    }
    &.fourCols1 {
      .card-container,
      .card-wrapper {
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4) {
          flex: 0 0 25%;
          max-width: 25%;
        }
      }
    }
  }
}
</style>
